<!DOCTYPE html>
<html>
	<head>
		<title>练习1</title>
		<meta name="" content="练习正则表达式，和数据for循环" />
		<meta charset="UTF-8" />
		<style>
			*{margin:0;padding:0;border:0; }
			header{width: 100%;max-width: 1200px;margin: 0 auto;}
			header h1{text-align:center;}
			header .form_data{
				width: 350px;
				height: auto;
				margin: 0 auto;
			}
			header .form_data form > div{width: 100%;margin-top: 20px;}
			header .form_data form > div label{font-size: 14px;}
			header .form_data form > div input{
				font-size: 14px;
				border:1px solid #000;
				border-radius: 5px;
				padding: 5px 10px;
				outline: none;
			}
			header .form_data form > div button{
				width: 100px;
				padding: 10px 5px;
				font-size: 15px;
				color: #fff;
				text-align:center;
				margin: 0 auto;
				display: block;
				background-color: #000;
			}
			.box_content{
				width: 350px;
				height: auto;
				margin: 0 auto;
			}
		</style> 
	</head>
	<body>
		<header>
			<h1>登陆成功才能看影视数据</h1>
			<div class="form_data">
				<form action="" method="" name="" class="">
					<div>
						<label>用&nbsp户&nbsp名：</label>
						<input type="text" name="username" value="" placeholder="请输入您的用户名" />
					</div>
					<div>
						<label>邮&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp箱：</label>
						<input type="text" name="email" value="" placeholder="请输入您的邮箱" />
					</div>
					<div>
						<label>年&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp龄：</label>
						<input type="text" name="year" value="" placeholder="请输入您的年龄" />
					</div>
					<div>
						<label>身份证号：</label>
						<input type="text" name="username_number" value="" placeholder="请输入您的身份证号" />
					</div>
					<!--
					<div>
						<label>性&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别：</label>
						<input type="text" name="gener" value="" placeholder="请输入您的性别" />
					</div>
					<div>
						<label>手&nbsp机&nbsp&nbsp&nbsp&nbsp号：</label>
						<input type="text" name="mobile" value="" placeholder="请输入您的手机号" />
					</div>
				-->
					<div>
						<button id="submit_data">登陆</button>
					</div>
				</form>
			</div>
		</header>
		<section>
			<div class="box_content">
				<div id="move">
					<ul class="list_data" id="ul">
						
					</ul>
				</div>
			</div>
		</section>
		<footer></footer>
	</body>
	<script type="text/javascript">
		/****
           @param:2018/12/02 23:02
           小功能：登陆成功，并且通过正则表达式验证，才能看到数据，以此作为介绍。
		*/

		//第一步做函数封装，功能就是：获取元素
		function $(id){
			return document.getElementById(id);
		}
		//获取表单form的元素
		var form = document.forms[0];

		$("submit_data").onclick = function (e){
			//先取消掉表单的提交数据默认动作
			e.preventDefault();
			//获取表单中得值
			var usr = form.username.value;
			var email = form.email.value;
			var year = form.year.value;
			var user_number = form.username_number.value;
			if(usr == ""){
				alert("用户名不能为空");
				return false; //停止往下执行
			}else{
				if(!/[0-9]+/.test(usr)){
					alert("用户名只能为纯数字");
					return false;
				}
			}

			if(email == ""){
				alert("邮箱不能为空");
				return false;
			}else{
				if(!/[0-9]+@\w+\.\w+/ig.test(email)){
					alert("邮箱格式错误");
					return false;
				}
			}

			if(year == ""){
				alert("年龄不能为空");
				return false;
			}else{
				if(!/[0-9]+/.test(year)){
					alert("年龄只能为纯数字");
					return false;
				}
			}

			if(user_number == ""){
				alert("身份证号不呢过为空");
				return false;
			}else{
				if(user_number.length > 14){
					alert("身份证号不呢过超过14位数");
					return false;
				}
				if(!/[0-9]+/ig.test(user_number)){
					alert("身份证号只能为纯数字");
					return false;
				}
			}
			alert("登陆成功！");

			//只有在登陆成功后才能调用这个函数，展示数据。
			move_data_show();
		}

		//影视数据封装
      function move_data_show(){
      	var move = $("ul");
      	var arr = [
            "影视1",
            "影视2",
            "电影",
            "电视剧",

      	];
      	var str = "";
      	for(var i=0;i<arr.length;i++){
      		str+="<li>"+arr[i]+"</li>";
      	}
      	move.innerHTML=str;
      }

	</script>
</html>